<template>
  <div>
    <div class="container position-sticky z-index-sticky top-0">
      <div class="row">
        <div class="col-12">
          <nav
            class="navbar navbar-expand-lg  blur border-radius-xl top-0 z-index-3 shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
            <div class="container-fluid px-0">
              <a class="navbar-brand font-weight-bolder ms-sm-3 d-none d-md-block" href="/index.html" rel="tooltip"
                title="小小梦想" data-placement="bottom"> 小小梦想 </a>
              <a class="navbar-brand font-weight-bolder ms-sm-3 d-block d-md-none" href="/index.html" rel="tooltip"
                title="小小梦想" data-placement="bottom"> 小小梦想 </a>
              <button class="navbar-toggler shadow-none ms-md-2 collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon mt-2">
                  <span class="navbar-toggler-bar bar1"></span>
                  <span class="navbar-toggler-bar bar2"></span>
                  <span class="navbar-toggler-bar bar3"></span>
                </span>
              </button>
              <Navbar theme="dark"></Navbar>
            </div>
          </nav>
        </div>
      </div>
    </div>
    <header>
      <div class="page-header min-vh-75" style="
        background-image: url('http://static.liushaofeng.cn/img/1.avif');
      " loading="lazy">
        <span class="mask bg-gradient-dark opacity-5"></span>
        <div class="container">
          <div class="row">
            <div
              class="col-lg-7 col-md-8 col-xs-12 d-flex justify-content-center text-md-start text-center flex-column mt-sm-0 mt-7">
              <h1 class="text-white">上善若水。水善利万物而不争，<br>处众人之所恶，故几于道。</h1>
              <p class="lead pe-md-5 me-md-5 text-white opacity-8">
                居善地，心善渊，与善仁，言善信，正善治，事善能，动善时。<br>夫唯不争，故无尤。
              </p>
              <div class="buttons">
                <a type="button" class="btn bg-gradient-primary mt-4" href="./books.html"> 我的书架 </a>
                <a type="button" class="btn text-white shadow-none mt-4" href="https://www.daodejing.org/"
                  ref="nofollow" target="_blank"> 《道德经》
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 mb-4">
      <section class="py-md-7">
        <div class="container">
          <div class="row justify-content-start">
            <div class="col-md-4 ms-md-auto me-md-4">
              <div class="text-start">
                <div class="
                  icon icon-md icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4">
                  <i class="material-icons opacity-10">store</i>
                </div>
                <h5 class="mt-3">水族</h5>
                <p>水族馆是收集、饲养和展览水生动物的机构。可专养海洋生物或淡水生物，也可兼养；既有供观赏或普及科学知识的公共水族馆，也有供科研及教学专用的水族馆。</p>
              </div>
              <div class="primary text-start border-radius-lg mt-6">
                <div class="
                  icon icon-md icon-shape
                  bg-gradient-primary
                  shadow-primary
                  text-center
                  border-radius-xl
                  mt-n4
                ">
                  <i class="material-icons opacity-10">accessibility</i>
                </div>
                <h5 class="mt-3">养生</h5>
                <p>原指道家通过各种方法颐养生命、增强体质、预防疾病，从而达到延年益寿的一种医事活动。</p>
              </div>
            </div>
            <div class="col-md-4 me-md-auto ms-md-4">
              <div class="primary text-start border-radius-lg">
                <div class="
                  icon icon-md icon-shape
                  bg-gradient-primary
                  shadow-primary
                  text-center
                  border-radius-xl
                  mt-n4
                ">
                  <i class="material-icons opacity-10">computer</i>
                </div>
                <h5 class="mt-3">IT</h5>
                <p>主要用于管理和处理信息所采用的各种技术的总称。它主要是应用计算机科学和通信技术来设计、开发、安装和实施信息系统及应用软件。</p>
              </div>
              <div class="primary text-start border-radius-lg mt-6">
                <div class="
                  icon icon-md icon-shape
                  bg-gradient-primary
                  shadow-primary
                  text-center
                  border-radius-xl
                  mt-n4
                ">
                  <i class="material-icons opacity-10">brightness_2</i>
                </div>
                <h5 class="mt-3">易学</h5>
                <p>易学属于在天人相应的学术思想指导下研究万事万物运行规律及其相互关系的哲学学问。</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="py-4 position-relative">
        <div class="container-fluid">
          <div class="row">
            <div class="col-10 mx-auto bg-gradient-dark border-radius-lg">
              <div class="row py-5">
                <div class="col-xl-4 col-md-6 px-5 position-relative">
                  <img class="img border-radius-md max-width-300 w-100 position-relative z-index-2 mt-n7"
                    src="https://static.liushaofeng.cn/img/2.avif" loading="lazy" alt="card image" />
                </div>
                <div class="
                  col-xl-4 col-md-5
                  z-index-2
                  position-relative
                  px-md-3 px-5
                  my-md-auto
                  mt-4
                ">
                  <i class="material-icons text-white text-5xl">format_quote</i>
                  <p class="text-lg text-white">
                    特性: 服务器端口检测、截屏、二维码编解码、计算机详细信息、待办提醒、
                    摄像头、WIFI管理、CPU使用率动画、图像处理、重复大文件检测、多文件浏览器、
                    登录壁纸修改等。更多效率提升常用工具期待你的意见。
                  </p>
                  <p class="text-white font-weight-bold text-sm">
                    Devkits -
                    <span class="text-xs font-weight-normal">Fengshao</span>
                  </p>
                  <hr class="vertical start-100 ms-n5 d-xl-block d-none" />
                </div>
                <div class="col-1"></div>
                <div class="col-xl-2 col-12 px-xl-0 px-5 my-xl-auto">
                  <h3 class="text-white mt-xl-0 mt-5">1,679,700 +</h3>
                  <p class="text-sm text-white opacity-8">
                    为软件工程师等工作人员提升工作效率的常用工具包。
                  </p>
                  <a href="https://github.com/qmjy/Devkits" ref="nofollow" target="_blank"
                    class="text-white icon-move-right text-sm">查看详情
                    <i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="py-sm-7 py-4">
        <div class="container">
          <div class="row">
            <div class="col-lg-5">
              <h3 class="mt-2">Read More About Us</h3>
              <p>
                Pain is what we go through as we become older. We get insulted by
                others, lose trust for those others. We get back stabbed by
                friends. It becomes harder for us to give others a hand.
              </p>
              <a href="javascript:;" class="text-primary text-sm icon-move-right">More about us
                <i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
              </a>
            </div>
            <div class="col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0 ms-auto">
              <div class="p-3 info-horizontal d-flex align-items-center">
                <div class="
                  icon icon-md icon-shape
                  bg-gradient-primary
                  shadow-primary
                  text-center
                  border-radius-xl
                ">
                  <i class="material-icons opacity-10">mediation</i>
                </div>
                <div class="description ps-3">
                  <p class="mb-0">
                    It becomes harder for us to give others a hand. <br />
                    We get our heart broken by people we love.
                  </p>
                </div>
              </div>
              <div class="p-3 info-horizontal d-flex align-items-center">
                <div class="
                  icon icon-md icon-shape
                  bg-gradient-primary
                  shadow-primary
                  text-center
                  border-radius-xl
                ">
                  <i class="material-icons opacity-10">settings_overscan</i>
                </div>
                <div class="description ps-3">
                  <p class="mb-0">
                    As we live, our hearts turn colder. <br />Cause pain is what
                    we go through as we become older.
                  </p>
                </div>
              </div>
              <div class="p-3 info-horizontal d-flex align-items-center">
                <div class="
                  icon icon-md icon-shape
                  bg-gradient-primary
                  shadow-primary
                  text-center
                  border-radius-xl
                ">
                  <i class="material-icons opacity-10">token</i>
                </div>
                <div class="description ps-3">
                  <p class="mb-0">
                    When we lose family over time. <br />
                    What else could rust the heart more over time? Blackgold.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="features-3 py-4">
        <div class="container">
          <div class="row text-center justify-content-center">
            <div class="col-lg-6">
              <span class="badge rounded-pill badge-primary mb-2">柴米油盐酱醋茶</span>
              <h2>探索博客空间</h2>
              <p>
                If you can’t decide, the answer is no. If two equally difficult
                paths, choose the one more painful in the short term (pain
                avoidance is creating an illusion of equality).
              </p>
            </div>
          </div>
          <div class="row mt-5">
            <div class="col-lg-4 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                  <a class="d-block blur-shadow-image">
                    <img src="https://static.liushaofeng.cn/img/3.avif" alt="img-blur-shadow"
                      class="img-fluid shadow border-radius-lg" loading="lazy" />
                  </a>
                  <div class="colored-shadow"
                    style="background-image: url('https://static.liushaofeng.cn/img/3.avif');">
                  </div>
                </div>
                <div class="card-body">
                  <h5 class="font-weight-normal">Campus 6</h5>
                  <p>
                    Website visitors today demand a frictionless user expericence.
                    Applies to mobile applications too.
                  </p>
                  <button class="btn btn-outline-dark btn-sm mb-0" type="button" name="button">
                    Find more
                  </button>
                </div>
              </div>

              <div class="card mt-5">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                  <a class="d-block blur-shadow-image">
                    <img src="https://static.liushaofeng.cn/img/4.avif" alt="img-blur-shadow"
                      class="img-fluid shadow border-radius-lg" loading="lazy" />
                  </a>
                  <div class="colored-shadow" style="
                    background-image: url('https://static.liushaofeng.cn/img/4.avif');
                  "></div>
                </div>
                <div class="card-body">
                  <h5 class="font-weight-normal">Virtual Office</h5>
                  <p>
                    If you’re more passionate about founding a business than the
                    business itself, you can fall into.
                  </p>
                  <button class="btn btn-outline-dark btn-sm mb-0" type="button" name="button">
                    More info
                  </button>
                </div>
              </div>
            </div>
            <div class="col-lg-4 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                  <a class="d-block blur-shadow-image">
                    <img src="https://static.liushaofeng.cn/img/5.avif" alt="img-blur-shadow"
                      class="img-fluid shadow border-radius-lg" loading="lazy" />
                  </a>
                  <div class="colored-shadow" style="
                    background-image: url('https://static.liushaofeng.cn/img/5.avif');
                  "></div>
                </div>
                <div class="card-body">
                  <h5 class="font-weight-normal">Cozy Spots</h5>
                  <p>
                    If you’re more passionate about founding a business than the
                    business itself technology.
                  </p>
                  <button class="btn btn-outline-dark btn-sm mb-0" type="button" name="button">
                    More info
                  </button>
                </div>
              </div>

              <div class="card mt-5">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                  <a class="d-block blur-shadow-image">
                    <img src="https://static.liushaofeng.cn/img/6.avif" alt="img-blur-shadow"
                      class="img-fluid shadow border-radius-lg" loading="lazy" />
                  </a>
                  <div class="colored-shadow" style="
                    background-image: url('https://static.liushaofeng.cn/img/6.avif');
                  "></div>
                </div>
                <div class="card-body">
                  <h5 class="font-weight-normal">Co-working Spaces</h5>
                  <p>
                    Smart money is just dumb money that’s been through a crash.
                    Business than the business itself.
                  </p>
                  <button class="btn btn-outline-dark btn-sm mb-0" type="button" name="button">
                    Find more
                  </button>
                </div>
              </div>
            </div>
            <div class="col-lg-4">
              <div class="card">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                  <a class="d-block blur-shadow-image">
                    <img src="https://static.liushaofeng.cn/img/7.avif" alt="img-blur-shadow"
                      class="img-fluid shadow border-radius-lg" loading="lazy" />
                  </a>
                  <div class="colored-shadow"
                    style="background-image: url('https://static.liushaofeng.cn/img/7.avif');">
                  </div>
                </div>
                <div class="card-body">
                  <h5 class="font-weight-normal">Home Office</h5>
                  <p>
                    Website visitors today demand a frictionless user expericence
                    — especially when using search.
                  </p>
                  <button class="btn btn-outline-dark btn-sm mb-0" type="button" name="button">
                    Find more
                  </button>
                </div>
              </div>

              <div class="card mt-5">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                  <a class="d-block blur-shadow-image">
                    <img src="https://static.liushaofeng.cn/img/8.avif" alt="img-blur-shadow"
                      class="img-fluid shadow border-radius-lg" loading="lazy" />
                  </a>
                  <div class="colored-shadow"
                    style="background-image: url('https://static.liushaofeng.cn/img/8.avif');">
                  </div>
                </div>
                <div class="card-body">
                  <h5 class="font-weight-normal">Private Space</h5>
                  <p>
                    Technology is not only the thing that moves the human race
                    forward, but it’s the only thing that has.
                  </p>
                  <button class="btn btn-outline-dark btn-sm mb-0" type="button" name="button">
                    More info
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div class="container">
        <div class="my-5 py-5 bg-gradient-dark position-relative border-radius-xl"
          style="background-image: url('https://static.liushaofeng.cn/img/9.avif');" loading="lazy">
          <div class="container position-relative z-index-2">
            <div class="row">
              <div class="col-lg-5 col-md-8 m-auto text-start">
                <h5 class="text-white mb-lg-0 mb-5">
                  应急救援证书是由国家人力资源和社会保障部批准，<br>是国家准入类资格证书...
                </h5>
              </div>
              <div class="col-lg-6 m-auto">
                <div class="row">
                  <div class="col-sm-4 col-6 ps-sm-0 ms-auto">
                    <a href="https://gitmind.cn/app/doc/ce28507617" target="_blank" ref="nofollow"
                      class="btn bg-gradient-warning mb-0 ms-lg-3 ms-sm-2 mb-sm-0 mb-2 me-auto w-100 d-block">
                      应急救援员
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
    <statistics></statistics>
  </div>
</template>

<script>



import Navbar from "../../components/Navbar.vue";
import Statistics from '../../components/Statistics.vue';
import VFooter from '../../components/V-Footer.vue';

export default {
  name: "App",
  components: {
    Navbar,
    Statistics,
    VFooter
  },
};
</script>
